<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<uni-icons type="search" size="18" color="#999"></uni-icons>
				<input class="search-input" type="text" placeholder="搜索商品或内容" v-model="searchText" @focus="onSearchFocus" />
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-active-color="#ff6b6b">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<view class="swiper-item" :style="{ background: item.color }">
					<text class="swiper-text">{{ item.title }}</text>
				</view>
			</swiper-item>
		</swiper>

		<!-- 分类标题 -->
		<view class="section-header">
			<text class="section-title">热门推荐</text>
			<text class="section-more">查看更多</text>
		</view>
		<!-- <button @click="queryByCondition">test</button>
		 <view>{{total}}</view>
		<view>{{queryCondition}}</view> -->
		<!-- 卡片浏览 -->
		<view class="card-container">
			<view class="card" v-for="(item, index) in cardList" :key="item.id" @click="onCardClick(item)">
				<image class="card-image" :src="item.image" mode="aspectFill"></image>
				<view class="card-content">
					<text class="card-title">{{ item.title }}</text>
					<text class="card-desc">{{ item.description }}</text>
					<view class="card-footer">
						<text class="card-price">¥{{ item.rating }}</text>
						<view class="card-rating">
							<uni-icons type="star-filled" size="14" color="#ffc107"></uni-icons>
							<text class="rating-text">申请</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { query } from '@/api/bankApi.js';
export default {
	data() {
		return {
			searchText: '',
			swiperList: [
				{
					title: '小微企业 贷款融资',
					color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
				},
				{
					title: '商业银行 信用贷款',
					color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
				},
				{
					title: '抵押保证 贷款放款',
					color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
				}
			],

			queryCondition: {
				pageNum: 1,
				pageSize: 8
			},
			total: 0,
			cardList: []
		};
	},
	methods: {
		onSearchFocus() {
			// 跳转到搜索页面
			// uni.navigateTo({
			// 	url: '/pages/search/search'
			// });
			this.cardList = [];
			this.total = 0;
			this.queryCondition.pageNum = 1;
			this.queryByCondition();
		},
		onCardClick(item) {
			// 跳转到商品详情页
			uni.navigateTo({
				url: `/pages/loan-apply/loan-apply?id=${item.id}`
			});
		},
		// 	// 			{
		// 				id: 7,
		// 				title: '天空银行' + this.searchForm.pageNum,
		// 				description: '三年期 低利率 4.86% 不动产抵押',
		// 				price: 299,
		// 				rating: 4.86,
		// 				image: '/static/product1.png'
		// 			},
		// {
		//     "bankId": 5,
		//     "bankName": "大地银行一支行",
		//     "bankEmail": "h_fanwb@163.com",
		//     "bankPassword": "贷款项目C",
		//     "bankRate": "0.0390",
		//     "bankPhone": "15521347213",
		//     "bankLength": "18",
		//     "bankProId": "120000",
		//     "bankCitId": "120100",
		//     "bankAraId": "120101",
		//     "bankAdress": "远东路123号",
		//     "bankDel": "0",
		//     "bankBz": "身份证,流水"
		//   },
		async queryByCondition() {
			const res = await query(this.queryCondition);
			console.log(res);
			const cards = res.results.map((e) => {
				return {
					id: e.bankId,
					title: e.bankName,
					description: e.bankPassword,
					price: e.bankRate,
					rating: e.bankRate,
					image: '/static/product1.png'
				};
			});
			this.cardList = this.cardList.concat(cards);
			this.total = res.total;
		}
	},
	onReachBottom() {
		// todo:
		console.log('触底了')
		if (this.total > this.queryCondition.pageNum * this.queryCondition.pageSize) {
			console.log('触底调用')
			this.queryCondition.pageNum++;
			this.queryByCondition();
		}
	},
	onLoad() {
		this.cardList = [];
		this.total = 0;
		this.queryCondition.pageNum = 1;
		this.queryByCondition();
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 搜索栏样式 */
.search-bar {
	margin-bottom: 30rpx;
}

.search-box {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.search-input {
	flex: 1;
	margin-left: 20rpx;
	font-size: 28rpx;
	color: #333;
}

/* 轮播图样式 */
.swiper {
	height: 320rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 40rpx;
}

.swiper-item {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20rpx;
}

.swiper-text {
	color: #ffffff;
	font-size: 36rpx;
	font-weight: bold;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 分类标题 */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.section-more {
	font-size: 26rpx;
	color: #999;
}

/* 卡片容器 */
.card-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
}

.card {
	background: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.card:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-image {
	width: 100%;
	height: 240rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-content {
	padding: 24rpx;
}

.card-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	display: block;
	margin-bottom: 12rpx;
	/* 文字超出显示省略号 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
	display: block;
	margin-bottom: 20rpx;
	/* 文字超出显示省略号 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #ff6b6b;
}

.card-rating {
	display: flex;
	align-items: center;
}

.rating-text {
	font-size: 24rpx;
	color: #666;
	margin-left: 8rpx;
}
</style>
